<!--
 * @Author       : xiangmin
 * @File         : 自定义空状态
 * @Date         : 2023-07-17 21:45:31
 * @LastEditors  : xiangmin
 * @LastEditTime : 2023-07-19 21:43:08
-->

<template>
	<div
		class="flex items-center justify-center"
		:style="{ height: `${height}px` }"
	>
		<a-empty
			:description="description"
			v-bind="$attrs"
		>
			<template #image>
				<c-icon
					:name="name"
					:size="size"
					class="icon-empty"
				/>
			</template>
			<template #default>
				<slot></slot>
			</template>
		</a-empty>
	</div>
</template>

<script setup lang="ts">
const {
	description = '哎呀，木有数据~',
	size = '100',
	name = 'empty',
	height = 'auto'
} = defineProps<{
	description?: string
	size?: string
	name?: 'empty'
	height?: string
}>()
</script>

<style scoped>
.icon-empty {
	fill: var(--main-color);
}
</style>
